<template>
    <div class="bpm-task-executors">
        <table class="bpm-table">
            <tr>
                <th style="width: 200px">{{i18n('taskExecutors.exePath','执行路径')}}</th>
                <th>{{i18n('taskExecutors.executor','执行人')}}</th>
            </tr>
            <!--一个节点 -->
            <tr v-if="newNodeExecutors.length==1">
                <td>{{newNodeExecutors[0].nodeName}}</td>
                <td>
                    <div v-if="newNodeExecutors[0].nodeType=='UserTask' " class="bpm-task-executors-nodetype">
                        <!-- 用户  -->
                        <div v-if="newNodeExecutors[0].users.length>0 ||  (newNodeExecutors[0].users.length==0 && (!newNodeExecutors[0].groups || newNodeExecutors[0].groups.length==0)) " class="bpm-task-executors-tag">
                            <bpm-executors v-model="newNodeExecutors[0].users" :filter="newNodeExecutors[0].userFilter"
                                           :single="newNodeExecutors[0].single" :readonly="!newNodeExecutors[0].allowSelectExecutor || newNodeExecutors[0].multipleType=='batch'"></bpm-executors>
                        </div>
                        <!-- 部门  -->
                        <div v-else class="bpm-task-executors-tag">
                            <rx-group-component v-model="newNodeExecutors[0].groups" :filter="newNodeExecutors[0].groupFilter"
                                                :single="singleExecutor"  :readonly="!newNodeExecutors[0].allowSelectExecutor || newNodeExecutors[0].multipleType=='batch'"  ></rx-group-component>
                        </div>
                    </div>
                    <!--   -->
                    <div v-else>
                        <div class="bpm-task-executors-user" v-for="(subNodeExe,index) in newNodeExecutors[0].outcomeNodeUsers" :key="index">
                            <span >{{subNodeExe.nodeName}}</span>
                            <div v-if="subNodeExe.nodeType=='UserTask' " class="bpm-task-executors-nodetype">
                                <!-- 用户  -->
                                <div v-if="subNodeExe.users.length>0 ||  (subNodeExe.users.length==0 && (!subNodeExe.groups || subNodeExe.groups.length==0)) " class="bpm-task-executors-tag">
                                    <bpm-executors v-model="subNodeExe.users" :filter="subNodeExe.userFilter"
                                                   :single="subNodeExe.single" :readonly="!subNodeExe.allowSelectExecutor || subNodeExe.multipleType=='batch'"></bpm-executors>
                                </div>
                                <!-- 部门  -->
                                <div  v-else class="bpm-task-executors-tag">
                                    <rx-group-component v-model="subNodeExe.groups" :filter="subNodeExe.groupFilter"
                                                        :single="singleExecutor"  :readonly="!subNodeExe.allowSelectExecutor || subNodeExe.multipleType=='batch'"></rx-group-component>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <!--多个节点-->
            <template v-else>
                <tr v-for="(node,idx) in newNodeExecutors" :key="node.nodeId">
                    <td>
                        <span class="label">
                        <a-radio :value="idx" :checked="node.selected" @change.stop="onChange"> </a-radio>
                        </span>
                        <span>{{node.nodeName}}</span>
                    </td>
                    <td>
                        <div class="bpm-task-executors-nodetype" v-if="node.nodeType=='UserTask' ">
                        <!-- 用户  -->
                        <div v-if="node.users.length>0 ||  (node.users.length==0 && (!node.groups || node.groups.length==0)) " class="bpm-task-executors-tag">
                            <bpm-executors v-model="node.users" :filter="node.userFilter" :single="node.single" :readonly="!node.allowSelectExecutor || node.multipleType=='batch'" :nodeChecked="node.selected"></bpm-executors>
                        </div>
                        <!-- 部门  -->
                        <div v-else class="bpm-task-executors-tag">
                            <rx-group-component  v-model="node.groups" :filter="node.groupFilter" :single="singleExecutor"  :readonly="!node.allowSelectExecutor || node.multipleType=='batch'" :nodeChecked="false"></rx-group-component>
                        </div>
                    </div>
                        <div v-else>
                            <div class="bpm-task-executors-user" v-for="subNodeExe in node.outcomeNodeUsers">
                                <span >{{subNodeExe.nodeName}}</span>
                                <div v-if="subNodeExe.nodeType=='UserTask' " class="bpm-task-executors-nodetype">
                                    <!-- 用户  -->
                                    <div v-if="subNodeExe.users.length>0 ||  (subNodeExe.users.length==0 && (!subNodeExe.groups || subNodeExe.groups.length==0)) " class="bpm-task-executors-tag">
                                        <bpm-executors  v-model="subNodeExe.users" :filter="subNodeExe.userFilter"
                                                        :single="subNodeExe.single" :readonly="!subNodeExe.allowSelectExecutor || subNodeExe.multipleType=='batch'" :nodeChecked="node.selected"></bpm-executors>
                                    </div>
                                    <!-- 部门  -->
                                    <div  v-else class="bpm-task-executors-tag">
                                        <rx-group-component v-model="subNodeExe.groups" :filter="subNodeExe.groupFilter"
                                                            :single="singleExecutor"  :readonly="!subNodeExe.allowSelectExecutor || subNodeExe.multipleType=='batch'" :nodeChecked="false"></rx-group-component>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </template>
        </table>
    </div>
</template>

<script>
    import {RxUserComponent,RxGroupComponent} from "@lowcode/jpaas-common-lib";
    import BpmExecutors from "@/views/modules/bpm/core/component/BpmExecutors";


    export default {
        name: "bpm-task-executors",
        components:{
            RxUserComponent,
            RxGroupComponent,
            BpmExecutors
        },
        props:{
            nodeExecutors:{
                type: Array,
                default: () =>  []
            },
            taskConfig:{
                type: Object
            },
            processConfig:{
                type: Object
            },
        },
        data() {
            return {
                newNodeExecutors:this.nodeExecutors,
                //执行人单选
                singleExecutor:false
            }
        },
        created(){
            this.convertLocal();
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"bpmTask",key);
            },
            onChange(e){
                var len=this.newNodeExecutors.length;
                for(var i=0;i<len;i++){
                    var obj=this.newNodeExecutors[i];
                    var val=e.target.value;
                    obj.selected=val==i;
                }
                this.$forceUpdate();
            },
            convertLocal(){
                if(this.newNodeExecutors){
                    for(var i=0;i<this.newNodeExecutors.length;i++){
                        var o=this.newNodeExecutors[i];
                        if(o.selected==undefined){
                            o.selected=i==0;
                        }
                        this.convertLocalRow(o);
                    }
                    this.$forceUpdate();
                }
                //允许选择执行人 获取是否只允许单选
                if(this.allowSelectExecutor ){
                    let rtn=false;
                    if(this.taskConfig && this.taskConfig.switchOptions.includes("singleExecutor")){
                        rtn=true;
                    }
                    else {
                        if(this.processConfig && this.processConfig.switchOptions.includes("singleExecutor")){
                            rtn=true;
                        }
                    }
                    this.singleExecutor=rtn;
                }
            },
            convertLocalRow(o){
                if(o.nodeType=="UserTask"){
                    this.convertToLocalExecutors(o);
                }
                else if(o.nodeType.indexOf("Gateway") || o.nodeType.indexOf("SubProcess")){
                    var rows=o.outcomeNodeUsers;
                    for(var i=0;i<rows.length;i++){
                        var row=rows[i];
                        this.convertToLocalExecutors(row);
                    }
                }
            },
            convertToLocalExecutors(o){
                var users=[];
                var groups=[];
                var executors= o.executors;
                for(var i=0;i<executors.length;i++){
                    var executor=executors[i];
                    if(executor.type=='user'){
                        users.push(executor);
                    }
                    else{
                        groups.push(executor);
                    }
                }
                o.users=users;
                o.groups=groups;
            },
            convertUsers(o){
                delete o.executors;
                var executors=[];

                if(o.users){
                    for(var i=0;i<o.users.length;i++){
                        var user=o.users[i];
                        user.type="user";
                        executors.push(user);
                    }
                }

                if(o.groups){
                    for(var i=0;i<o.groups.length;i++){
                        var group=o.groups[i];
                        group.type="group";
                        executors.push(group);
                    }
                }

                o.executors=executors;
            },
            convertData(){
                for(var i=0;i<this.newNodeExecutors.length;i++){
                    var o=this.newNodeExecutors[i];

                    if(o.nodeType=="UserTask"){
                        this.convertUsers(o);
                    }
                    else if(o.nodeType.indexOf("Gateway")!=-1 || o.nodeType.indexOf("SubProcess")!=-1){
                        var rows=o.outcomeNodeUsers;
                        for(var i=0;i<rows.length;i++){
                            var row=rows[i];
                            if(row.nodeType=="UserTask"){
                                this.convertUsers(row);
                            }
                        }
                    }
                }
            },
            getDestNodeId() {
                if(this.newNodeExecutors.length==1){
                    if(this.taskConfig && this.taskConfig.nextHandMode && this.taskConfig.nextHandMode=="condition"){
                        return this.newNodeExecutors[0].nodeId;
                    }
                    return "";
                }
                var nodeId="";
                this.newNodeExecutors.forEach(item => {
                    if ( item.selected) {
                        nodeId=item.nodeId;
                    }
                })
                return nodeId;
            },
            getNodeUserMap() {
                this.convertData();
                let nodeUserMap = {}
                this.newNodeExecutors.forEach(item => {
                    if ( item.nodeType=="UserTask" && item.executors && item.executors.length > 0 && item.selected) {
                        nodeUserMap[item.nodeId] = item.executors
                    }
                    if (item.outcomeNodeUsers && item.outcomeNodeUsers.length > 0) {
                        for (let i = 0; i < item.outcomeNodeUsers.length; i++) {
                            var obj=item.outcomeNodeUsers[i];
                            if (obj.nodeType=="UserTask" && obj.executors && obj.executors.length > 0 && item.selected) {
                                nodeUserMap[obj.nodeId] = obj.executors
                            }
                        }
                    }
                })
                return nodeUserMap;
            },
        },
        watch:{
            "nodeExecutors":{
                handler(val){
                    this.newNodeExecutors=val;
                    this.convertLocal();
                },
                deep:true
            }
        }

    }
</script>

<style scoped>
 .bpm-task-executors .bpm-table{
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-bottom: none;
}
 .bpm-task-executors .bpm-table th,td{
     height: 38px;
     line-height: normal;
     background-color: #f8f8f8;
     /*border-radius: 4px 4px 0px 0px;*/
     border-bottom: 1px solid #d9d9d9;
     border-right: 1px solid #d9d9d9;
     padding:10px;
     color: #444444;
     font-size: 14px;
     font-weight: normal;
 }
 .bpm-task-executors .bpm-table th:last-child{
     border-right: none;
 }
 .bpm-task-executors .bpm-table td{
     background-color: white;
     border-right: 1px solid #d9d9d9;
     color: #46494d;
 }
</style>